<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员个人主页</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
    <!-- 自定义CSS -->

    <style>
        .user-info {
    color: #337ab7 !important;
  }

        body {
            background-color: #f8f9fa;
            padding: 20px;
        }

        .function-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .function-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            height: 160px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            cursor: pointer;
            padding: 20px;
        }

        .function-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .function-card i {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .function-card h5 {
            margin-bottom: 5px;
            font-weight: 600;
            font-size: 1.2rem;
        }

        .function-card p {
            color: #6c757d;
            font-size: 0.95rem;
            margin-bottom: 0;
        }

        /* 右侧项目进度区域 */
        .progress-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            height: calc(100vh - 40px);
            overflow-y: auto;
        }

        .progress-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .progress-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .progress-item {
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }

        .progress-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            align-items: center;
        }

        .progress-bar-container {
            height: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        .progress-details {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: #6c757d;
        }

        /* 不同功能的颜色 */
        #model-training {
            background-color: #e3f2fd;
            color: #0d47a1;
        }

        #workload-estimation {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        #task-assignment {
            background-color: #fff3e0;
            color: #e65100;
        }

        #task-monitoring {
            background-color: #f3e5f5;
            color: #6a1b9a;
        }

        .refresh-btn {
            border: none;
            background-color: transparent;
            color: #0d6efd;
            cursor: pointer;
            font-size: 1rem;
        }

        .refresh-btn:hover {
            color: #0b5ed7;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
        }
        .progress-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    gap: 5px;
}

.progress-title strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.rename-icon {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.rename-icon:hover {
    opacity: 1;
}

.progress-item:hover .rename-icon {
    opacity: 0.8;
}

.invite-icon {
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
    color: #0d6efd; /* 使用蓝色突出显示 */
}

.invite-icon:hover {
    opacity: 1;
}

.progress-item:hover .invite-icon {
    opacity: 0.8;
}
/* 添加到您的 <style> 部分 */

.progress-bar.bg-success {
    background-color: var(--bs-success) !important;
}
.progress-bar.bg-warning {
    background-color: var(--bs-warning) !important;
}
    </style>
</head>
<body>
<!-- 顶部导航条 -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent shadow-sm mb-4"
     style="margin-top:-20px;margin-left:-20px;margin-right:-20px">
    <div class="container-fluid" style="max-height: 35px;">
        <a class="navbar-brand" href="/fine-se">
            <strong>
                <i style="font-size: 36px; margin-left: 30px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700;">
                    <font color="black">Fine</font>
                    <font color="black"> - </font>
                    <font color="#00B0F0">SE</font>
                </i>
            </strong>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
            <ul class="navbar-nav mb-2 mb-lg-0">

                <!-- 项目下拉列表 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle user-info" href="#" id="projectDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-tasks fa-fw"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="projectDropdown"
                        style="min-width: 300px;">
                        <li>
                            <a class="dropdown-item">
                                <div class="d-flex justify-content-between">
                                    <strong>项目1</strong><small class="text-muted">40%</small>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 40%;"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item">
                                <div class="d-flex justify-content-between">
                                    <strong>项目2</strong><small class="text-muted">20%</small>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item">
                                <div class="d-flex justify-content-between">
                                    <strong>项目3</strong><small class="text-muted">60%</small>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar bg-warning" role="progressbar" style="width: 60%;"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item">
                                <div class="d-flex justify-content-between">
                                    <strong>项目4</strong><small class="text-muted">80%</small>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar bg-danger" role="progressbar" style="width: 80%;"></div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item text-center" href="#"><strong>查看所有项目 <i
                                class="fas fa-angle-right"></i></strong></a></li>
                    </ul>
                </li>

                <!-- 用户信息下拉 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle user-info" href="#" id="userDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false"
                       style="font-size: 16px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
                        <i class="fa fa-user fa-fw"></i> {{ user_full_name }}  <!-- 使用传递的变量 -->
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                        <li><a class="dropdown-item" href="#"><i class="fas fa-user-circle me-2"></i>用户信息</a></li>
                        <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>设置</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <!-- 左侧功能区域 - 8/12宽度 -->
        <div class="col-md-8">
            <h4 class="section-title"><i class="bi bi-speedometer2"></i> 管理功能</h4>

            <div class="function-grid">
                <div class="function-card" id="model-training" onclick="window.location.href='/train'">
                    <div class="text-center">
                        <i class="fas fa-graduation-cap"></i>  <!-- 原为 bi-cpu -->
                        <h5>模型训练</h5>
                        <p>创建和管理AI模型训练任务</p>
                    </div>
                </div>

                <div class="function-card" id="workload-estimation" onclick="window.location.href='/predict'">
                    <div class="text-center">
                        <i class="bi bi-calculator-fill"></i>  <!-- 原为 bi-calculator -->
                        <h5>工作量评估</h5>
                        <p>评估项目所需资源和时间</p>
                    </div>
                </div>

                <div class="function-card" id="task-assignment" onclick="window.location.href='/assign'">
                    <div class="text-center">
                        <i class="fas fa-tasks"></i>  <!-- 原为 bi-people -->
                        <h5>分配任务</h5>
                        <p>将任务分配给团队成员</p>
                    </div>
                </div>

                <div class="function-card" id="task-monitoring" onclick="window.location.href='/monitorframe'">
                    <div class="text-center">
                        <i class="bi bi-graph-up"></i>  <!-- 原为 bi-eye -->
                        <h5>监控任务</h5>
                        <p>跟踪任务进度和状态</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧项目进度区域 - 4/12宽度 -->
        <div class="col-md-4">
            <div class="progress-container">
                <div class="progress-header d-flex justify-content-between align-items-center">
                    <h4 class="section-title"><i class="bi bi-clipboard2-pulse"></i> 我的项目</h4>
                    <div>
                        <button class="btn btn-sm btn-success me-2" onclick="window.location.href='/train?new=true'">
                            <i class="bi bi-plus-lg"></i> 新建项目
                        </button>
                        <button class="refresh-btn" id="refresh-projects">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                </div>

                <div id="project-progress">
                    <!-- 这里将通过JavaScript动态加载项目进度数据 -->
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        <p class="mt-3">正在加载项目数据...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 自定义JavaScript -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get the projects data passed from Django
        const djangoProjects = [
            {% for project in projects %}
                {
                    id: {{ project.id }},
                    name: "{{ project.name }}",
                    start_date: "{{ project.start_date|date:'Y-m-d' }}",
                    progress: {{project.project_progress}}  // Random progress for demo
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];

        // 渲染项目进度 - 长条形布局
        function renderProjects(projects) {
            const container = document.getElementById('project-progress');

            if (projects.length === 0) {
                container.innerHTML = `
                    <div class="text-center py-5">
                        <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                        <p class="mt-3">当前没有进行中的项目</p>
                    </div>
                `;
                return;
            }

            let html = '<div class="progress-list">';
            projects.forEach(project => {
                // 根据进度设置进度条颜色
                let progressClass = 'bg-primary';
                if (project.progress > 70) progressClass = 'bg-success';
                else if (project.progress < 30) progressClass = 'bg-warning';

                html += `
                    <div class="progress-item" data-project-id="${project.id}" data-project-name="${project.name}" style="cursor: pointer;">
                        <div class="progress-title">
                            <strong>${project.name}</strong>
                            <i class="bi bi-pencil-square ms-2 rename-icon" style="font-size: 0.8rem; cursor: pointer;"
                               data-project-id="${project.id}" title="重命名"></i>
                            <i class="bi bi-person-plus ms-2 invite-icon" style="font-size: 0.8rem; cursor: pointer;"
                               data-project-id="${project.id}" title="邀请成员"></i>
                            <i class="bi bi-box-arrow-in-right ms-2 enter-icon" style="font-size: 0.8rem; cursor: pointer; color: #28a745;"
                               data-project-id="${project.id}" title="进入项目"></i>
                            <span class="flex-grow-1"></span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar ${progressClass}"
                                 role="progressbar"
                                 style="width: ${project.progress}%;"
                                 aria-valuenow="${project.progress}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                            </div>
                        </div>
                        <div class="progress-details">
                            <span><i class="bi bi-calendar3"></i> ${project.start_date}</span>
                            <span>${project.progress}% 完成</span>
                        </div>
                    </div>
                `;
            });
            html += '</div>';

            container.innerHTML = html;

            setupRenameIcons(); // 添加这行
            setupInviteIcons(); // 添加这行
            setupEnterIcons(); // 添加这行

            // 添加点击事件监听器
            document.querySelectorAll('.progress-item').forEach(item => {
                item.addEventListener('click', function(e) {
                    // 阻止事件冒泡，确保不会触发父元素的点击事件
                    e.stopPropagation();

                    const projectId = this.getAttribute('data-project-id');
                    const projectName = this.getAttribute('data-project-name');

                    // 存储当前选中的项目到sessionStorage
                    sessionStorage.setItem('selectedProjectId', projectId);
                    sessionStorage.setItem('selectedProjectName', projectName);
                });
            });
        }

        function setupRenameIcons() {
    document.querySelectorAll('.rename-icon').forEach(icon => {
        icon.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡

            const projectId = this.getAttribute('data-project-id');
            const projectItem = this.closest('.progress-item');
            const projectNameElement = projectItem.querySelector('strong');
            const originalName = projectNameElement.textContent;

            // 创建输入框
            const input = document.createElement('input');
            input.type = 'text';
            input.value = originalName;
            input.className = 'form-control form-control-sm d-inline-block';
            input.style.width = 'auto';

            // 替换项目名为输入框
            projectNameElement.replaceWith(input);
            input.focus();

            // 处理回车键事件
            input.addEventListener('keydown', function(e) {
                if (e.key === 'Enter') {
                    const newName = input.value.trim();
                    if (newName && newName !== originalName) {
                        renameProject(projectId, newName, projectItem, projectNameElement);
                    } else {
                        // 如果名称未改变或为空，恢复原状
                        input.replaceWith(projectNameElement);
                    }
                } else if (e.key === 'Escape') {
                    // ESC键恢复原状
                    input.replaceWith(projectNameElement);
                }
            });

            // 失去焦点时恢复原状
            input.addEventListener('blur', function() {
                input.replaceWith(projectNameElement);
            });
        });
    });
}

// 发送重命名请求
function renameProject(projectId, newName, projectItem, nameElement) {
    // 显示加载状态
    const spinner = document.createElement('span');
    spinner.className = 'spinner-border spinner-border-sm me-2';
    nameElement.before(spinner);

    // 发送AJAX请求
    fetch('/rename/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken'),
        },
        body: JSON.stringify({
            action: 'rename_project',
            project_id: projectId,
            new_name: newName
        })
    })
    .then(response => response.json())
    .then(data => {
        spinner.remove();
        if (data.status === 'success') {
            // 更新项目名
            nameElement.textContent = newName;

            // 显示成功消息
            showAlert('项目重命名成功！', 'success');
        } else {
            showAlert('重命名失败: ' + data.message, 'danger');
        }
    })
    .catch(error => {
        spinner.remove();
        showAlert('请求失败: ' + error, 'danger');
    });
}

// 显示提示消息
function showAlert(message, type) {
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show mt-2`;
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    document.getElementById('project-progress').prepend(alert);
}

// 获取CSRF token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

        // 初始加载项目数据
        renderProjects(djangoProjects);

        // 刷新按钮点击事件
        document.getElementById('refresh-projects').addEventListener('click', function() {
            const container = document.getElementById('project-progress');
            container.innerHTML = `
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                    <p class="mt-3">正在刷新项目数据...</p>
                </div>
            `;

            // 模拟刷新延迟
            setTimeout(() => {
                // 更新进度值为新的随机值
                const refreshedProjects = djangoProjects.map(project => {
                    return {
                        ...project,
                        progress: Math.floor(Math.random() * 100)
                    };
                });
                renderProjects(refreshedProjects);

                // 显示刷新成功的提示
                const alert = document.createElement('div');
                alert.className = 'alert alert-success alert-dismissible fade show';
                alert.innerHTML = `
                    项目数据已成功刷新！
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;
                container.prepend(alert);
            }, 800);
        });

        // 功能卡片点击事件
        function setupInviteIcons() {
    document.querySelectorAll('.invite-icon').forEach(icon => {
        icon.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡

            const projectId = this.getAttribute('data-project-id');

            // 复制项目ID到剪贴板
            navigator.clipboard.writeText(projectId).then(() => {
                // 显示提示信息
                const tooltip = new bootstrap.Tooltip(this, {
                    title: '已复制项目ID!',
                    trigger: 'manual'
                });
                tooltip.show();

                // 3秒后自动隐藏提示
                setTimeout(() => {
                    tooltip.hide();
                    setTimeout(() => tooltip.dispose(), 100);
                }, 2000);

                // 也可以使用alert，但tooltip更美观
                // alert(`已复制项目ID: ${projectId}`);
            }).catch(err => {
                console.error('复制失败:', err);
                alert('复制项目ID失败，请手动复制');
            });
        });
    });
}
function setupEnterIcons() {
    document.querySelectorAll('.enter-icon').forEach(icon => {
        icon.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡

            const projectId = this.getAttribute('data-project-id');

            // 跳转到monitor页面并传递项目ID参数
            window.location.href = `/monitor/?project=${projectId}`;
        });
    });
}
    });
</script>
</body>
</html>